如何在Netx.js Blog中增加一个模块

背景

之前此博客托管在github，使用github pages服务，使用jekyll构建。由于近期github禁用中国IP，导致访问速度变慢，所以迁移到Vercel。

模块

“模块”是菜单中增加一个条目，并指向一个页面。

采用数据与程序分离的架构，数据使用contentlayer管理，程序使用Next.js管理，数据存放在 data/ 目录下。

下面以 csm 模块为例，介绍如何增加一个模块。

步骤

增加菜单链接
增加类型定义
增加路由与页面
增加内容mdx文件

1. 增加菜单链接

在 data/headerNavLinks.ts 中增加一个条目。

const headerNavLinks = [
  { href: '/', title: 'Home' },
  { href: '/blog', title: 'Blog' },
  { href: '/csm', title: 'Cloud Service Mapping' },
  { href: '/tags', title: 'Tags' },
  { href: '/projects', title: 'Projects' },
  { href: '/about', title: 'About' },
]

export default headerNavLinks

2. 增加类型定义

在 contentlayer.config.ts 中增加一个类型定义。

export const CSM = defineDocumentType(() => ({
  name: 'CSM',
  filePathPattern: 'csm/**/*.mdx',
  contentType: 'mdx',
  fields: {
    title: { type: 'string', required: true },
  },
}))

3. 增加路由与页面

在 app/csm/page.tsx 中增加一个页面。

//这一行隐藏的约定是：allCSMs 是 contentlayer 生成的所有 CSM 类型的集合，对应 /data/csm 目录下的所有 mdx 文件
import { allCSMs } from 'contentlayer/generated'
...

export async function generateMetadata(): Promise<Metadata> {
  const csm = allCSMs.find((doc) => doc.slug === 'csm')

4. 增加内容mdx文件

在 data/csm 目录下增加一个mdx文件。

---
---
title: 'Cloud Service Mapping'
date: 2019-02-03
tags: ['Cloud Service Mapping']
slug: 'csm'
summary: 本文介绍了云服务映射，包括云服务映射、云服务映射、云服务映射等。
---
...